<template>
	<view class="content">
		<view class="box">
			<view class="addbank">
				<view class="item">
					<view class="label">
						姓名
					</view>
					<view class="input">
						<u--input placeholder="请输入姓名" border="none" inputAlign="right" v-model="form.name"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="label">
						银行卡账号
					</view>
					<view class="input">
						<u--input placeholder="请输入银行卡账号" border="none" inputAlign="right" type="number" v-model="form.bank_card"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="label">
						开户银行
					</view>
					<view class="select" @click="goSelectList">
						<view class="select-text">
							{{form.bank_open?form.bank_open:'请选择'}}
						</view>
						<view class="select-icon">
							<uni-icons type="right" size="24"></uni-icons>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="label">
						开户支行
					</view>
					<view class="input">
						<u--input placeholder="输入正确的支行信息" border="none" inputAlign="right" v-model="form.bank_branch"></u--input>
					</view>
				</view>
				<view class="item" style="border: 0;">
					<view class="label">
						银行预留手机
					</view>
					<view class="input">
						<u--input placeholder="输入您预留的手机号" border="none" inputAlign="right" type="number" v-model="form.mobile"></u--input>
					</view>
				</view>
				<view class="submit">
					<view class="btn" @click="submit">
						确认添加
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		checkMobile,
		isValidBankCardNumber
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				form: {
					name: '',
					bank_card: '',
					mobile: '',
					bank_open: '',
					bank_branch: '',
					type: 3
				}
			}
		},
		methods: {
			goSelectList() {
				uni.navigateTo({
					url: '/pages/person/my/selectList'
				})
			},
			bankValue(e) {
				this.form.bank_open = e
			},
			submit(){
				if (this.form.name == '') {
					uni.showToast({
						title: '姓名不可为空',
						icon: 'none'
					});
					return
				}
				if (this.form.bank_card == '') {
					uni.showToast({
						title: '银行卡账号不可为空',
						icon: 'none'
					});
					return
				}
				if (!isValidBankCardNumber(this.form.bank_card)) {
					uni.showToast({
						title: '请输入正确银行卡账号',
						icon: 'none'
					});
					return
				}
				if (this.form.bank_open == '') {
					uni.showToast({
						title: '开户银行不可为空',
						icon: 'none'
					});
					return
				}
				if (this.form.bank_branch == '') {
					uni.showToast({
						title: '开户支行不可为空',
						icon: 'none'
					});
					return
				}
				if (this.form.mobile == '') {
					uni.showToast({
						title: '手机号不可为空',
						icon: 'none'
					});
					return
				}
				if (!checkMobile(this.form.mobile)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return
				}
				this.$api.banksave(this.form).then(res => {
					this.navBack()
				})
			},
			navBack(){
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.getData()
				uni.navigateBack({ delta: 1 })
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f5f5f5;
		min-height: 100vh;
		z-index: -1;
	}
	.box{
		padding: 0 30rpx;
		min-height: 100vh;
		z-index: -1;
	}
	.addbank{
		min-height: 100vh;
		z-index: -1;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 30rpx;
		.item{
			display: flex;
			justify-content: space-between;
			padding: 45rpx 0;
			border-bottom: 2rpx solid #e7e7e7;
			.input{
				flex: 1;
				padding-left: 20rpx;
			}
			.select{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 40rpx;
				color: #666666;
				line-height: 44rpx;
				text-align: right;
				font-style: normal;
				padding-left: 20rpx;
				display: flex;
				justify-content: end;
				.select-text{
					padding-right: 22rpx;
				}
			}
		}
	}
	.submit{
		padding-top: 380rpx;
		.btn{
			width: 630rpx;
			height: 84rpx;
			background: linear-gradient( 270deg, #EA6F29 0%, #FAAA7D 100%);
			border-radius: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}
	}
</style>
